<template>
    <div>
        <h2 class="form-group-label">
            组件内边距
        </h2>
        <van-field>
            <template #input>
                <label style="margin-right: 8px">上边距</label>
                <van-stepper  style="margin-right: 16px" v-model="paddingTop" integer min="0" max="300" />
                <label style="margin-right: 8px">下边距</label>
                <van-stepper v-model="paddingBottom" integer min="0" max="300" />
            </template>
        </van-field>
        <van-field>
            <template #input>
                <label style="margin-right: 8px">左边距</label>
                <van-stepper  style="margin-right: 16px" v-model="paddingLeft" integer min="0" max="300" />
                <label style="margin-right: 8px">右边距</label>
                <van-stepper v-model="paddingRight" integer min="0" max="300" />
            </template>
        </van-field>
    </div>
</template>


<script>
    export default {
        props : {

        },
        data(){
            return {
            }
        },
        computed:{
            paddingTop : {
                get(){
                    return parseInt(this.$store.state.selectedComponent.data.style.paddingTop)
                },
                set(value){
                    this.$store.state.selectedComponent.data.style.paddingTop = value + 'px'
                }
            },
            paddingRight : {
                get(){
                    return parseInt(this.$store.state.selectedComponent.data.style.paddingRight)
                },
                set(value){
                    this.$store.state.selectedComponent.data.style.paddingRight = value + 'px'
                }
            },
            paddingLeft : {
                get(){
                    return parseInt(this.$store.state.selectedComponent.data.style.paddingLeft)
                },
                set(value){
                    this.$store.state.selectedComponent.data.style.paddingLeft = value + 'px'
                }
            },
            paddingBottom : {
                get(){
                    return parseInt(this.$store.state.selectedComponent.data.style.paddingBottom)
                },
                set(value){
                    this.$store.state.selectedComponent.data.style.paddingBottom = value + 'px'
                }
            }
        }
    }
</script>